<template>
	<view class="wd">
		<!-- 头部 -->
		<div class="wd-head">
			<div class="wd-head-img">
				<img id="wd-head-jux" src="../../public/img/矩形 14.png" alt="" />
				<img id="wd-head-xiz" src="../../public/img/形状 10 拷贝.png" alt="" />
				<img id="wd-head-xis" src="../../public/img/形状 10.png" alt="" />
				<img id="wd-head-brd" src="../../public/img/矩形 13.png" alt="" />
			</div>
			<div class="user" v-for="(item,index) in user">
				<div class="user-san">
					<img id="user-img" :src='item.useravatar' alt="" />
					<h2 class="user-san-h2">{{item.username}}</h2>
					<p class="user-san-p">{{item.signature}}</p>
				</div>
				<!-- 关注、粉丝 -->
				<div>
					<div class="wd-gf">
						<div class="wd-gf-guanzhu">
							<uni-icons id="iconpret" type="personadd" size="30"></uni-icons>
							<span @click="guanzhu">关注 {{item.Numberofconcern}}</span>
						</div>
						<div class="wd-gf-fensi">
							<uni-icons id="iconpret" type="staff" size="30"></uni-icons>
							<span @click="fensi">粉丝 {{item.thenumberoffans}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>



		<!-- 收藏、作品、点赞 -->
		<div class="wd-tag">
			<div class="wd-qiehuan">
				<u-tag @click="switchTab('collect')" :mode="currentTab === 'collect' ? 'light' : 'default'" text="收藏" />
				<u-tag @click="switchTab('works')" :mode="currentTab === 'works' ? 'light' : 'default'" text="作品" />
				<u-tag @click="switchTab('likes')" :mode="currentTab === 'likes' ? 'light' : 'default'" text="点赞" />
			</div>
			<div class="wd-qid">
				<div v-if="currentTab === 'collect'">
					<div class="big-name-ioc" v-for="(item,index) in shoucang">
						<img class="big-img" :src="item.collectpictures" alt="" />
						<h3 class="big-h3">{{item.collectionname}}</h3>
						<!-- 作者昵称、图片、次数 -->
						<div class="name-ioc">
							<div class="toux-name">
								<img id="toux-name-img" :src="item.authorprofilepicture" alt="" />
								<p class="toux-name-p"> {{item.authornickname}}</p>
							</div>
							<div class="cishu-ioc">
								<uni-icons color="#AEAEAE" class="eye-icon" type="eye" size="16"></uni-icons>
								<p class="cishu-ioc-p">{{item.numberofviews}}</p>
							</div>
						</div>
					</div>
				</div>
				<div v-else-if="currentTab === 'works'">
					222
				</div>
				<div v-else-if="currentTab === 'likes'">
					<div class="big-name-ioc" v-for="(item,index) in dianzan">
						<img class="big-img" :src="item.givelikeimg" alt="" />
						<h3 class="big-h3">{{item.givelikename}}</h3>
						<!-- 作者昵称、图片、次数 -->
						<div class="name-ioc">
							<div class="toux-name">
								<img id="toux-name-img" :src="item.authorpictureimg" alt="" />
								<p class="toux-name-p"> {{item.authornickname}}</p>
							</div>
							<div class="cishu-ioc">
								<uni-icons color="#AEAEAE" class="eye-icon" type="eye" size="16"></uni-icons>
								<p class="cishu-ioc-p">{{item.numberofvisitors}}</p>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>


	</view>
</template>

<script>
	import {
		yyctimeclubmy,
		yycdianzan,
		yycshoucang
	} from '../../api/index.js'

	export default {
		data() {
			return {
				user: [],
				dianzan: [],
				shoucang: [],
				currentTab: 'collect'
			};
		},
		created() {
			yyctimeclubmy().then((res) => {
				console.log(res);
				this.user = res.data
			});


			yycshoucang().then((res) => {
				console.log(res)
				this.shoucang = res.data
			})

			yycdianzan().then((res) => {
				console.log(res)
				this.dianzan = res.data
			})
		},
		mounted() {

		},
		methods: {
			switchTab(tab) {
				this.currentTab = tab;
			},
			guanzhu() {
				let userName = this.user[0].username
				uni.navigateTo({
					url: `guanzhu?name=${userName}`
				})
			},
			fensi() {
				let userName = this.user[0].username
				uni.navigateTo({
					url: `fensi?name=${userName}`
				})
			}
		}
	};
</script>
<!-- 我想写一个切换，默认显示收藏，点击作品的时候切换到作品的内容，点击点赞的时候显示点赞的内容使用uview该怎么写 -->
<style lang="scss" scoped>
	.wd {
		width: 100%;
		height: 100%;

		// padding-bottom: 100px;
		.wd-head {
			width: 100%;
			height: 230px;
			// background-color: red;
			position: relative;

			.wd-head-img {
				width: 100%;
				height: 100%;

				#wd-head-jux {
					width: 100%;
					height: 150px;
				}

				#wd-head-xiz {
					width: 100%;
					height: 70px;
					position: relative;
					bottom: 55px;
				}

				#wd-head-xis {
					width: 100%;
					position: relative;
					bottom: 90px;
				}

				#wd-head-brd {
					width: 97%;
					height: 75%;
					position: relative;
					bottom: 190px;
					left: 7px;
					// z-index: 1;
				}
			}

			.user {
				width: 100%;
				height: 150px;
				// background-color: red;
				position: absolute;
				top: 9%;
				transform: translateY(-50%);
				left: 48%;
				transform: translateX(-50%);

				.user-san {
					margin-left: 10px;
					display: grid;
					align-items: center;
					justify-items: center;

					.user-san-p {
						font-size: 11px;
						color: #B5A673;
					}

					.user-san-h2 {
						color: #323232;
					}

					#user-img {
						width: 100px;
						height: 100px;
					}
				}
			}
		}

		.wd-gf {
			width: 100%;
			height: 100px;
			// background-color: blue;
			z-index: 999;

			.wd-gf-guanzhu {
				float: left;
				// margin-left: 80px;
				// margin-right: 30px;
				margin: 10px 30px 20px 80px;
			}

			.wd-gf-fensi {
				float: left;
				margin-left: 40px;
				margin-top: 10px;
			}

			iconpret {}
		}

		.wd-tag {
			position: relative;
			width: 100%;
			height: 100px;
			// background-color: forestgreen;
			margin-top: 40px;

			.wd-qiehuan {
				width: 100%;
				position: absolute;
				top: 0;
				left: 64%;
				transform: translateX(-50%);

				// padding: 10px 10px ;
				.u-size-default[data-v-1481d46d] {
					font-size: 16px;
					padding: 6px 30px;
				}

				.u-mode-light-primary[data-v-1481d46d] {
					background-color: #FFFFFF;
					color: #363636;
					border: 0px solid #a0cfff;
					border-bottom: 2px solid #FEDD73;
					font-size: 16px;
					font-weight: bold;
					// margin-left: 10px;
				}
			}

			.wd-qid {
				width: 100%;
				height: 100%;
				// background-color: #323232;
				position: relative;
				top: 60px;
				padding-bottom: 700px;
			}


			.big-name-ioc {
				position: relative;
				width: 170px;
				height: 240px;
				border-radius: 10px;
				float: left;
				margin-left: 12px;
				box-shadow: 0 0 10px #D1D1D1;
				margin-bottom: 10px;

				.big-img {
					width: 85%;
					height: 150px;
					margin-left: 12.5px;
					margin-top: 10px;
				}

				.big-h3 {
					margin-top: 10px;
					margin-left: 15px;
				}

				.name-ioc {
					.toux-name {
						margin-top: 10px;
						margin-left: 5px;

						.toux-name-p {
							color: #AEAEAE;
							font-size: 12px;
							line-height: 22px;
							position: relative;
							// top: -18px;
							left: 4px;
						}

						#toux-name-img {
							width: 20px;
							height: 20px;
							margin-left: 10px;
							float: left;
						}
					}

					.cishu-ioc {
						position: relative;
						top: -18px;
						left: 115px;

						.eye-icon {
							float: left;
						}

						.cishu-ioc-p {
							color: #AEAEAE;
							font-size: 12px;
						}
					}
				}

			}
		}

	}
</style>
